<template>
	<view class="register">
		<!-- F1 用户名输入框组 -->
		<view class="input-group">
			<uni-easyinput  v-model="uname" placeholder="用户名/邮箱/手机号" :inputBorder="false"/>
		</view>
		<!-- F2 密码输入框组 -->
		<view class="input-group">
			<uni-easyinput type="password" v-model="upwd" 
			placeholder="请输入密码" :inputBorder="false"/>
			</view>
		<!-- F2 密码输入框组 -->
		<view class="input-group">
			<uni-easyinput type="password" v-model="repwd" 
			placeholder="请在输入一次密码" :inputBorder="false"/>
		</view>
		<view class="input-group">
			<uni-easyinput  v-model="email" placeholder="邮箱" :inputBorder="false"/>
		</view>
		<view class="input-group">
			<uni-easyinput  v-model="phone" placeholder="手机号" :inputBorder="false"/>
		</view>
		<!-- F3 登录按钮 -->
		<view class="button">
			<text @click="reg">注册</text>
		</view>
		<!-- F4 打开注册组件 -->
		<text class="go" @click="gologin">已有帐号?现在去登录</text>
	
	</view>
</template>

<script>
	export default {
		name:"xz-register",
		data() {
			return {
				uname:'1',
				upwd:'1',
				repwd:"1",
				email:'1',
				phone:"1"
			};
		},
		methods: {
			gologin() {
				this.$emit('gologin')
				
			},
			reg(){
				uni.showLoading({
					title:'请稍后'
				})
				let uname=this.uname
				let upwd=this.upwd
				let repwd=this.upwd
				let email=this.email
				let phone=this.phone
				let url=this.$url.register
				uni.request({
					url,
					data:{uname,upwd,repwd,email,phone},
					success: (res) => {
						console.log(res.data)
						if(res.data.code===200){
							uni.showToast({
								title:'注册成功',
								icon:"success"
							})
							this.$emit('gologin')
						}else{
							uni.showToast({
								title:'注册失败',
								icon:"error"
							})
						}
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			}
			
		},
		mounted() {
			uni.setNavigationBarTitle({
				title:'注册新用户'
			})
		}
	}
</script>

<style lang="scss">
 .register{
	 position: absolute;
	 top: 0;
	 width: 750rpx;
	 padding: 60rpx;
	 .input-group{
		 
		 border-bottom: 1px solid $uni-text-color-grey;
		 // padding: 15rpx;
		 margin-bottom:$uni-spacing-col-lg ;
		 display: flex;
		 align-items: center;
		 text{
			 color: $uni-text-color-grey;
			 margin: 0 $uni-spacing-row-base;
			 font-size: $uni-font-size-sm;
		 }
		 navigator{
			 color: $uni-text-color-grey;
			 font-size: $uni-font-size-sm;
		 }
	 }
	 .button{
		 background-color: $xz-theme;
		 border-radius: $uni-border-radius-lg;
		 text-align: center;
		 color: #fff;
		 line-height: 80rpx;
		 margin-top: 100rpx;
		 margin-bottom: 40rpx;
		 &:active{
			background-color:darken($color: $xz-theme, $amount:5%);
		 }
	 }
	 .go{
		color: $uni-text-color-grey;
	 }
 }
</style>